<template>
  <div class="pagination">
    <div class="page-total" v-if="isShowPageTotal">
      {{paginationLeftInfo}}
    </div>
    <el-pagination ref="elPagination" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageBean.pageIndex" :page-size="pageBean.pageSize" :pager-count="pagerCount" :layout="layout" :total="pageBean.Total">
      <span v-if="hasJump" class="pagination-btn">跳转</span>
    </el-pagination>
  </div>
</template>

<script>
  import {PageBean} from '../../utils/page-bean';
  export default {
    name:"pagination",
    props: {
      // 分页实体
      pageBean: {
        type: Object,
        default: function () {
          return new PageBean();
        }
      },
      isShowTotal:{
        type:Boolean,
        default:true
      },
      isShowPageTotal:{
        type:Boolean,
        default:true
      },
      pagerCount:{
        type:Number,
        default:7
      },
      hasJump:{
        type:Boolean,
        default:true
      }
    },
    computed: {
      /**
       * table左下角的信息展示
       */
      paginationLeftInfo: function () {
        const total = `共有${this.pageBean.Total}条记录`;
        const page = `当前${this.pageBean.pageIndex}/${this.pageBean.lastIndex}页`;
        if(this.isShowTotal){
          return `${total}，${page}`;
        }else{
          return `${page}`;
        }
      },
      layout(){
        return this.hasJump ? 'prev, pager, next, jumper,slot' : 'prev, pager, next'
      }
    },
    data() {
      return {};
    },
    methods: {
      /**
       * 每页显示多少条变化事件
       * @param event
       */
      handleSizeChange(event) {
        this.$emit('size-change', event);
      },
      /**
       * 页码变化
       * @param event
       */
      handleCurrentChange(event) {
        this.$emit('current-change', event);
      }
    }
  };
</script>

<style scoped lang="scss">
  .pagination {
    padding:20px 0 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .page-total {
      padding-left: 10px;
      font-size: 13px;
      color: #999;
    }
  }
  ::v-deep .el-pagination{
    padding: 0;
    font-weight: normal !important;
  }
  ::v-deep .pagination-btn {
    border: 1px solid #f3f3f3;
    font-size: 14px !important;
    color: #888;
    
    padding: 0 10px;
    line-height: 26px !important;
    height: 28px !important;
    margin-left: 10px;
    cursor: pointer;
  }

  ::v-deep .el-pagination.is-background .btn-prev,
  ::v-deep .el-pagination.is-background .btn-next,
  ::v-deep .el-pagination.is-background .el-pager li {
    border: 1px solid #f3f3f3;
    margin: 0 5px;
    background-color: #fff;
    color: #888;
    min-width: 28px;
    height: 28px;
    line-height: 26px;
    border-radius: 0;
  }

  ::v-deep .el-pagination.is-background .btn-prev:disabled,
  ::v-deep .el-pagination.is-background .btn-next:disabled {
    color: #ccc;
  }

  // ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  //   background-color: #153D96;
  //   color: #fff;
  // }

  // ::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover {
  //   border: 1px solid #153D96;
  // }

  ::v-deep .el-pagination__editor.el-input .el-input__inner {
    border-radius: 0;
    color: #656565;
    height: 28px;
  }

  ::v-deep .el-pagination__jump {
    margin-left: 24px;
    font-weight: normal !important;
    color: #656565;
    font-size: 12px;
    line-height: 28px;
  }
</style>
